<template>
	<view class="home">
		<!-- 搜索 -->
		<view class="search">
			<navigator url="/pages/index/search" hover-class="none">
				<uv-search
					disabled
					:showAction="false"
					placeholder="搜索岗位或关键词"
					inputAlign="center"
					bgColor="#fff"
				></uv-search>
			</navigator>
		</view>
		<!-- 招聘会 -->
		<view class="banner">
			<uv-swiper
				:list="jobFairsList"
				keyName="image"
				indicator
				circular
				indicatorMode="dot"
				height="350rpx"
				radius="0"
				@click="toPage"
			></uv-swiper>
		</view>
		<!-- 导航 -->
		<view class="nav-bar">
			<navigator url="/pages/job-fairs/list" class="item" hover-class="none">
				<image src="../../static/img/grid-1.png" mode=""></image>
				<text>招聘会</text>
			</navigator>
			<navigator url="/pages/job/hot" class="item" hover-class="none">
				<image src="../../static/img/grid-2.png" mode=""></image>
				<text>热门职位</text>
			</navigator>
			<navigator url="/pages/information/index" class="item" hover-class="none">
				<image src="../../static/img/grid-3.png" mode=""></image>
				<text>就业指导</text>
			</navigator>
			<navigator url="/pages/common/position?search=1" class="item" hover-class="none">
				<image src="../../static/img/grid-4.png" mode=""></image>
				<text>全部职位</text>
			</navigator>
		</view>
		<!-- 通知 -->
		<view class="notice">
			<text class="yzb yzb-notice notice-icon"></text>
			<view class="content"><text>桂林信息科技学院将在5月1日举办招聘会</text></view>
			<text class="yzb yzb-next notice-next"></text>
		</view>
		<!-- 岗位列表 -->
		<view class="job-wrap">
			<job-list :list="jobList"></job-list>
			<view class="load-more-box" v-if="jobList.length > 0">
				<uv-load-more :status="status" :loadmoreText="loadmoreText" />
			</view>
			<uv-empty v-else icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
		</view>
	</view>
</template>

<script>
import JobList from '@/components/JobList.vue';
import { getJobList } from '@/apis/job/index.js';
import { getJobFairsList } from '@/apis/job-fairs/index.js';

export default {
	components: { JobList },
	data() {
		return {
			isFirst: false,
			page: 1, // 当前页
			size: 5, // 显示条数
			total: 0, // 总条数
			jobList: [], // 岗位列表
			jobFairsList: [], // 招聘会轮播列表
			status: 'loadmore', // 加载状态
			loadmoreText: '上拉加载更多'
		};
	},
	onShow() {
		const token = uni.getStorageSync('token');
		if (!token) {
			uni.navigateTo({ url: '/pages/user/login/index' });
			return;
		}
		if (!this.isFirst) {
			this.initData();
			this.initJobFairs();
		}
	},
	// mounted() {
	// 	this.initData();
	// 	this.initJobFairs();
	// },
	// 下拉刷新
	onPullDownRefresh() {
		this.initData();
		this.initJobFairs();
	},
	// 上拉加载更多
	onReachBottom() {
		const totalPage = Math.ceil(this.total / this.size);
		if (this.page >= totalPage) {
			return;
		}
		this.status = 'loading';
		this.page++;
		this.initData();
	},
	methods: {
		// 招聘会列表
		initJobFairs() {
			getJobFairsList({ enableStatus: 1 }).then(res => {
				this.jobFairsList = res.data.list;
			});
		},
		// 初始化数据
		async initData() {
			const userId = this.$store.state.userInfo.id;
			const res = await getJobList({ page: this.page, size: this.size, userId });
			if (res.code === 200) {
				this.isFirst = true;
				// TODO 如果不用onshow的话似乎也可以，或者用onshow获取最新的总条数，必须得用mounted了
				this.total = res.data.count;
				this.jobList.push(...res.data.list);
				if (this.page >= Math.ceil(this.total / this.size)) {
					this.status = 'nomore';
				}
			} else {
				this.loadmoreText = '加载失败，点我重试';
			}
		},
		toPage(e) {
			uni.navigateTo({ url: `/pages/job-fairs/index?id=${this.jobFairsList[e].id}` });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f2f2f2;
}
</style>

<style lang="scss" scoped>
.home {
	.search {
		padding: 20rpx 30rpx;
		background-color: $main-color;
	}
	.nav-bar {
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
	.notice {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		border-top: 20rpx solid #f2f2f2;
		border-bottom: 20rpx solid #f5f5f5;
		background-color: #fff;
		.yzb {
			width: 90rpx;
			line-height: 120rpx;
			text-align: center;
		}
		.notice-icon {
			color: #12ae85;
			font-size: 36rpx;
		}
		.notice-next {
			font-size: 42rpx;
		}
		.content {
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text {
				display: inline-block;
				font-size: 32rpx;
				padding-left: 100%;
				animation: marquee 10s linear infinite;
			}
		}
	}
	// .job-wrap {
	// 	padding: 0 20rpx;
	// }
	.load-more-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #f2f2f2;
	}
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}
</style>
